import React,{Component} from 'react';
import {connect} from 'react-redux';
import {getNews,getCate,findNews} from './../action/news';
import NavLink from './NavLink.js';
var moment = require('moment');

class NewsContext extends Component{

    state = { 
        cateId:null,
        title:'中国'
     }

    componentWillMount(){
        this.props.getNews();
        this.props.getCate();
    }

    sort(e){
        let cateId = e.currentTarget.getAttribute('data-id');
        let title = e.currentTarget.getAttribute('data-tit')
        this.setState({ cateId: cateId,title:title });
        this.props.getNews(cateId);
    }

    changePage(e){
        let page=e.currentTarget.getAttribute('data-page');
		this.props.getNews(this.state.cateId,page);
    }

    render(){
        const {lists,cate} = this.props;
        if(!lists.rows){
            return <li>数据加载中...</li>
        }

        var output= [];
        var pages = 1;
        var outputPages=[];
        var cates = [];

        pages=Math.ceil(lists.total/lists.limit);
		for(let i=1;i<=pages;i++){
			outputPages.push(
				<li key={i} >
			        <a href="javascript:void(0)" style={{zIndex:'0'}} data-page={i} onClick={(e)=>this.changePage(e)}>{i}
			        	<span className="sr-only"></span>
			        </a>
			    </li>
			)
        }

        var ls=lists.rows;
        for(var i=0;i<lists.rows.length;i++){
            ls[i].date=moment(ls[i].date).format("YYYY年MM月DD日 HH:mm");
            output.push(
                <div className="jumbotron"  key={i} style={{backgroundColor:'#B8B8B8',}}>
                    <h3>{ls[i].title}</h3>
                    <p>{ls[i].btitle}</p>
                    <p></p>
                    <p>{ls[i].content}</p>
                    <p></p>
                    <p>作者：{ls[i].author}</p>
                    <p>时间：{ls[i].date}</p>
                    <p>
                        <NavLink className="btn btn-primary" style={{background:'black'}} to={'/comment/'+ls[i]._id}  role="button" >查看评论 &raquo;</NavLink>&nbsp;
                    </p>
                </div>
                
            )
        }

        for(let i=0;i<cate.length;i++){
            cates.push(
                <a href="javascript:void(0)" 
                    data-id={cate[i]._id} 
                    data-tit={cate[i].title}
                    className="list-group-item" 
                    key={i}
                    onClick={(e)=>this.sort(e)}
                >{cate[i].title}</a>
            )
        }

        return(
            <div>
                <div className="row row-offcanvas row-offcanvas-right">
                <div className="col-xs-12 col-sm-9" >
                    <p className="pull-right visible-xs">
                        <button type="button" className="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                    </p>
                    <div className="panel panel-primary" style={{borderColor:'#101010'}}>
                        <div className="panel-heading" style={{background:'#101010',color:'white'}}>{this.state.title}新闻</div>
                        <div className="panel-body">
                            <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
                                {output}
                            
                            <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
                        </div>
                    </div>
                </div>

                <div className="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" style={{marginTop:'20px'}}>
                    <div className="list-group">
                        {cates}
                    </div>
                </div>
                </div>
            </div>
        )
    }
}

const getValue = (state)=>{
    return {
        lists:state.news.news,
        cate:state.news.cate
    }
}

const News = connect(getValue,{getNews,getCate,findNews})(NewsContext);

export default News;